<template>
    <div :id="'floor' + curData.id" class="messageList-item-root">
        <div class="root-top">
            <span>
                #{{ curData.id }}
                <b class="name">{{ curData.name }}</b>
            </span>
            <div class="clear-but" v-if="curData.isDel" @click.stop="del_ClickEvent(curData.id)">
                <!-- <span>DEL</span> -->
                <img src="@/static/icon/close-bl.svg" />
            </div>
        </div>
        <div class="root-date">
            <i>{{ setTime(curData.createTime) }}</i>
            <a v-if="toRank" @click="scrollToSection(toRank)">回复: #{{ toRank }}</a>
        </div>
        <div class="root-text" v-html="setText(curData.text)"></div>
    </div>
</template>

<script setup>
import { setTime } from "@/tools/time.js";

const props = defineProps({
    curData: {
        text: "",
    },
});
const toRank = ref(0);
const emits = defineEmits(["delItem"]);


const scrollToSection = (sectionId) => {
    return;
    const section = document.getElementById('floor' + sectionId);
    // console.log(section.parentNode, section.parentNode.scrollTop)
    if (section) {
        section.parentNode.scrollIntoView(true);
    }
}

const setText = (text) => {
    const arr = text.split('<br/>');
    let temp = text;
    if (arr.length >= 2) {
        var num = parseInt(arr[0].substring(2, arr[0].length));
        if (arr[0].substring(0, 2) == 'to' && (num + '').length == arr[0].length - 2) {
            temp = temp.replace(`to${num}<br/>`, '');
            toRank.value = num;
        }
    }
    return temp;
};

const del_ClickEvent = (id) => {
    emits("delItem", id);
};

</script>

<style lang="scss" scoped>
.messageList-item-root {
    background: rgba(255, 255, 255, 0.7);
    padding: 7px;
    // transition-duration: 0.3s;
    margin-top: 10px;
    border-radius: 7px;
    overflow: hidden;

    .root-top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .clear-but {
            height: 15px;
            width: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-right: 7px;
            cursor: pointer;

            >span {
                margin-right: 10px;
                // color: rgb(255, 70, 107);
                font-size: 10px;
            }

            >img {
                width: 100%;
                height: 100%;
            }
        }

        .name {
            margin-left: 10px;
            color: #409eff;
        }
    }

    .root-date {
        height: 16px;
        display: flex;
        align-items: center;
        padding: 3px 0;
        // justify-content: space-between;

        >i {
            margin-left: 10px;
            color: rgb(88, 88, 88);
            font-size: 12px;
        }

        >a {
            font-size: 12px;
            margin-left: 20px;
        }
    }

    .root-text {
        font-size: 13px;
        margin: 0px 5px 3px 5px;
    }
}
</style>
